<template>
	<scroll-view scroll-y class="scrollPage">


		<view class="UCenter-bg " :style="'background-image: url('+headimg+');background-size: cover; '">

			<view class="light line-blue text-bold" @click="goBack"> <text class="cuIcon-back"></text> 返回</view>
			<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-wave"></image>
		</view>

		<view class="cu-card dynamic margin-top-sm margin-bottom-sm">
			<view class="cu-item shadow ">
				<view class="padding">
					<view class="">
						<view class="line-green text-bold" >{{one.title}}</view>
					</view>
					<view class="text-right">
						<view class="huati text-orange text-bold">#{{topicTitle}}#</view>
					</view>
					<view class="grid">
						<view class="round cu-tag bg-blue light">{{one.username}}</view>
						<view class="padding-lr padding-tbl">
							To
							<text class="cuIcon-like line-red text-bold"></text>
							<!-- <text class="cuIcon-evaluate line-red"></text> -->
						</view>
						<view class="right">
							<view class="round cu-tag bg-pink light">{{one.sendto}}</view>
						</view>
					</view>
					<view class="right">
						<view class="text-gray text-sm flex justify-between">{{one.createtime|timeFormat}}</view>
					</view>

				</view>


				<view class="padding">
					<textarea class="text-content" auto-height disabled v-model="one.content"></textarea>
				</view>
				<view class="grid col-3 flex-sub padding-lr" v-if="images !=''">

					<view v-for="(img,index) in images " :key='index'>
						<!-- {{img}} -->
						<image mode="widthFix" class="response" :src="img" @click="imgMap(img)"></image>
					</view>
				</view>
				
				
			     <view class="margin-sm" >
				
					<view class="flex justify-end ">
						<view class="right">
							<view class="cu-tag round bg-green sm">{{one.school}}</view>
						</view>
						<view class="right">
							<view class="round cu-tag bg-yellow sm">{{one.classname}}</view>
						</view>				
					</view>
					<view class="flex justify-end">
					  <text class="right cuIcon-link">浏览:{{one.views}}</text>
					  <text class="right cuIcon-new">评论:{{one.comments}}</text>
					  <view class="right text-blue">{{one.create_date}}</view>
					</view>
					
					 
						<view class="text-right">
								<view class="text-gray text-sm">{{one.createtime|timeFormat}}</view>
						</view>
				</view>
				
				
				
				
				
				
				
				
				
				
				
				
				<!-- <view class="text-gray text-sm text-right padding">
					<view class="henflex">
						<view class="right">
							<view class="cu-tag round bg-green sm">{{one.school}}</view>
						</view>
						<view class="right">
							<view class="round cu-tag bg-yellow sm">{{one.class}}</view>
						</view>
						
					</view>
					<text class="right cuIcon-link">浏览:{{one.views}}</text>
					<text class="right cuIcon-new">评论:{{one.comments}}</text>
				</view> -->
			</view>
		</view>
		
		


		<!-- S 赞踩 -->
		<view class="thumbs">
			
			<view class="like" @click="vote" data-type="like">
				<text class="cuIcon-activityfill text-white"></text>
			</view>
			<view class="progress">
				<view class="bar">
					<view class="current" :style="'width:'+one.likeratio +'%;'"></view>
				</view>
				<view class="num">
					<text>{{one.likes}}</text> :
					<text>{{one.dislikes}}</text>
				</view>
			</view>
			<view class="dislike" @click="vote" data-type="dislike">
				<text class="cuIcon-apps text-white"></text>
			</view>
		</view>
		<!-- E 赞踩 -->
		
		
		
	<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-list text-blue"></text>评论列表
			</view>
			<view class="action">
				<navigator class="action cu-btn round line-orange padding-sm" url="design" hover-class="none"  data-target="showcomment" @click="showCommentWindow">
					<text class="cuIcon-skinfill"></text>
					<text class="text-df">我要评论</text>
				</navigator>
			</view>
		</view>

		


		<view class="cu-list menu-avatar comment ">
			<view class="cu-item" v-for="(comment,index) in commentList" :key="index">
				<view class="cu-avatar round" :style="'background-image:url('+comment.user.avatar+');'"></view>
				<view class="content">
					<view class="text-grey">{{comment.user.nickname}}</view>

					<view class="text-gray text-content text-df">
						{{comment.content}}
					</view>

					<view class="margin-top-sm flex justify-between">
						<view class="text-gray text-df">{{comment.create_date}}</view>
						<view>
							<view class="text-gray text-df">{{comment.createtime|timeFormat}}</view>
							<view class="text-gray text-sm">来自-{{comment.ip}}</view>
						</view>
					</view>

				</view>
			</view>
		</view>






		<!-- 	<view class="" v-if="topicList.length <= 0">
			<view class="padding-xl ErrorNetwork text-center">
				<image src="../../../static/NotAvailable.png" mode="widthFix" style='width:60%' />
				<view class="text-bold text-gray" style="letter-spacing:6rpx;line-height:50rpx;font-size:26rpx">
					暂无讲评信息哟
				</view>
			</view>

		</view>

	<! 	<view class="text-center" v-else-if="num < count">
			<view class="action cu-btn round line-blue padding margin-sm" @click="getMoreList">
				<text class="cuIcon-discover"></text>
				<text class="text-lg">加载更多</text>
			</view>
		</view>


		<view class="text-center" v-else="">
			<view class="action  round line-blue padding margin-sm">
				<text class="cuIcon-flashlightopen"></text>
				<text class="text-sm">没有更多数据了哟</text>
			</view>
		</view> -->
<!-- 
		<button class="cu-btn bg-blue shadow margin-left" @tap="showCommentWindow" data-target="showcomment">评论</button> -->
		<view class="cu-modal" :class="modalName=='showcomment'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">评论内容</view>
					<view class="action" @tap="hideCommentWindow">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<textarea auto-height class="text-content" v-model ="usercomment" ></textarea>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="sendToComment">确定</view>
				</view>
			</view>
		</view>




	</scroll-view>
</template>

<script>
	var _self, num = 10;
	export default {
		data() {
			return {
				// topicList: [],
				one: [],
				commentList: [],
				// count: '',
				// num: 10,
				archives: '',
				images: [],
				modalName: null,
				usercomment:'',
				headimg:'',
				topicTitle:'',
				channel:''
			}
		},

		onLoad(option) {
			this.archives = option.id;
			this.channel =option.channel;
			console.log(this.archives);
			console.log(this.channel);
			_self = this;
			this.getdetal();
			this.getHeadimg();
			
		},
		methods: {
			
			getHeadimg(){
				this.$http.get('addons/cms/api/channelByID?channel_id=' + _self.channel)
					.then(res => {
						console.log(res);
						_self.headimg = res.data.data.image;
						_self.topicTitle = res.data.data.name;
						
					})
					.catch(err => {});
			},
			showCommentWindow(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideCommentWindow(e) {
				this.modalName = null
			},
			sendToComment() {
				this.$http.post('/addons/cms/wxapp.comment/post',{
					aid:_self.archives,
					content:_self.usercomment
				}).then(res=>{
					uni.showToast({
						icon:"none",
						title:res.data.msg,
						position:"center"
					});
					this.getComment();
					_self.usercomment ='';
					this.modalName = null;
				}).catch(err => {});
			},
			
			
			getComment(){
				this.$http.get('addons/cms/wxapp.comment?aid='+_self.archives).then(res=>{
					_self.commentList =res.data.data.commentList;
				}).catch(err => {});
			},

			vote(e) {

				var type = event.currentTarget.dataset.type;
				var vote = wx.getStorageSync("vote") || [];
				if (vote.indexOf(this.archives) > -1) {
					uni.showToast({
						icon:'none',
						title: "你已经发表过意见了哟,请勿重复操作",
						position:'center'
					});
					return;
				}
				vote.push(this.archives);
				uni.setStorageSync("vote", vote);
				var choosetype = e.currentTarget.dataset.type;
				console.log(choosetype);
				this.$http.post('addons/cms/wxapp.archives/vote', {
						id: this.archives,
						type: choosetype
					})
					.then(res => {
						_self.one.likes = res.data.data.likes;
						_self.one.dislikes = res.data.data.dislikes;
						console.log(res);
					})
					.catch(err => {});
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			upToweek() {
				uni.navigateTo({
					url: './send'
				});
			},
			getMoreList() {
				this.num += 10;

				if (this.num > _self.count) {
					this.num = _self.count;
				}
				this.$http.get('api/WeekendTopic/getOneWeekList/num/' + num)
					.then(res => {
						_self.one = res.data.data;
						_self.count = res.data.msg;
					})
					.catch(err => {});
			},

			getdetal() {
				this.$http.get('addons/cms/wxapp.archives/detail?id='+_self.archives)
					.then(res => {
						_self.one = res.data.data.archivesInfo;
						// _self.count = res.data.msg;
						_self.commentList = res.data.data.commentList;
						_self.images = _self.one.images.split(",");
						console.log(res);
						console.log(_self.images);
					})
					.catch(err => {});
			},
			imgMap(url) {
				uni.previewImage({
					urls: [url] //这里一定是数组，不然就报错
				});
			}

		},
		filters: {

			timeFormat: function(arg, type = 'YYYY-MM-DD h:m:s') {

				if (arg.toString().length == 10) {
					arg = arg * 1000;
					//如果date为13位不需要乘1000
					//[js时间戳长度是13位]，php，java等时间戳长度为10位
				}
				var date = new Date(arg)
				var year = date.getFullYear(); //获取年
				var mouth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //月
				var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()); //日
				var hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()); //时
				var minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()); //分
				var second = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); //秒
				if (type == 'YYYY-MM-DD h:m:s') {
					return year + '-' + mouth + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				}

			}

		},
	};
</script>





<style>
	.btn-plusempty{
		width: 110upx;
		height: 110upx;
		background: #007bfa;
		position: fixed;
		bottom: 50upx;
		right: 20upx;
		border-radius: 100%;
		overflow: hidden;
		text-align: center;
		line-height: 110upx;
	}
	.plusempty-img{
		width: 50upx;
		height: 50upx;
		margin-top: 30upx;
	}
	.cu-tag.sm {
		font-size: 20rpx;
		padding: 0rpx 12rpx;
		height: 32rpx;
	}

	.right {
		margin-left: 20upx;
	}

	.henflex {
		display: flex;
		flex-flow: row;
		padding: 15upx;
	}

	.UCenter-bg {
		background-image: url("/static/home.jpeg");
		background-size: cover;
		height: 550rpx;
		display: flex;
		/* justify-content: center; */
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: start;
		color: #39B54A;
		font-weight: 300;
		/* text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); */
	}
	
	
		.chenyun-bg {
		/* background-image: url("/static/home.jpeg"); */
		background-color: #FFFFFF;
		background-size: cover;
		/* height: 550rpx; */
		display: flex;
		/* justify-content: center; */
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: start;
		color: #39B54A;
		font-weight: 300;
		/* text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); */
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.textforcut {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}



	.thumbs {
		padding: 15px;
		margin: 0px auto;
		text-align: center;
		background: #fff;


	}

	.thumbs .like,
	.thumbs .dislike {
		display: inline-block;
		width: 44px;
		height: 44px;
		line-height: 44px;
		color: #999;
		text-align: center;
		background-color: #bebebe;
		background-position: center center;
		background-repeat: no-repeat;
		transition: background-color 300ms linear;
		border-radius: 22px;
		background-clip: padding-box;
		vertical-align: middle;
	}

	.thumbs .like {
		position: relative;
		margin-right: 5px;
		background-color: #46c37b;
	}

	.thumbs .like:hover {
		background-color: #08aa73;
	}

	.thumbs .dislike {
		position: relative;
		margin-left: 5px;
	}

	.thumbs .dislike:hover {
		background-color: #999;
	}

	.thumbs i.fa {
		font-size: 20px;
		/* color: #fff; */
	}

	.thumbs .progress {
		position: relative;
		display: inline-block;
		vertical-align: -18%;
	}

	.thumbs .bar {
		width: 110px;
		height: 7px;
		overflow: hidden;
		background-color: #dcdcdc;
		border-radius: 4px;
		background-clip: padding-box;
	}

	.thumbs .bar .current {
		display: block;
		height: 100%;
		width: 50%;
		background-color: #46c37b;
		transition: width 300ms linear;
	}

	.thumbs .num {
		position: absolute;
		top: -18px;
		display: block;
		width: 100%;
		font-style: normal;
		font-size: 10px;
		color: #999;
		text-align: center;
	}

	.thumbs .num i {
		position: absolute;
		right: 55%;
		color: #46c37b;
		font-style: normal;
	}

	.thumbs .num span {
		position: absolute;
		left: 55%;
	}
      .gif-wave {
		/* position: absolute; */
		width: 100%;
		bottom: 0;
		left: 0;
		/* z-index: 99; */
		/* mix-blend-mode: screen; */
		height: 100rpx;
	}
</style>
